{% extends 'bbs/base.html' %}

{% block title %}
    文章详情页-青灯论坛
{% endblock %}


{% block main %}
    <!--中间内容部分-->
    <div class="article-content">
        <div class="article-body">
            <h3>{{ article.title }}</h3>
            <div class="detail_about clearfix">
                <span class="time_source ">{{ article.create_time }} 来源: {{ article.source }}</span>
                {#文章的评论数量#}
                <span class="comment_liens">{{ article.comment_list.count() }}</span>
            </div>

            <p class="summary">
                {{ article.digest }}
            </p>

            {{ article.content | safe }}


            <!--收藏/取消收藏-->
            <a href="javascript:;" class="collection block-center"
               style="display:  {% if is_collect %}none{% else %}block{% endif %}">收藏</a>
            <a href="javascript:;" class="collected block-center"
               style="display: {% if is_collect %}block{% else %}none{% endif %}">
                <span class="out">已收藏</span>
                <span class="over" style="display: none">取消收藏</span>
            </a>

            <!--评论栏-->
            <!--评论栏-未登陆显示登陆之后进行评论-->
            {% if not current_user.is_active %}
                <div class="comment_form_logout" style="color: red">
                    登录发表你的评论
                </div>
            {% else %}
                <!--评论栏-登陆之后显示用户头像并进行评论-->
                <form action="" class="comment_form">
                    <div class="person_pic">
                        <img src="/static/images/cat.jpg" alt="用户图标">
                        <textarea placeholder="请发表您的评论" class="comment_input"></textarea>
                    </div>
                    <input type="submit" name="" value="评 论" class="comment_sub">
                </form>
            {% endif %}
            <!--评论数据展示栏-->
            <div class="comment_count">
                4条评论
            </div>

            <div class="comments">
                {#渲染评论#}
                {% for comment in comment_list %}
                    {% if not comment.parent %}
                        <div class="comment">
                            <div class="person_pic">
                                <img src="{{ comment.user.avatar_url }}" alt="用户图标">
                            </div>
                            <div class="comment-content">
                                <div class="user_name">{{ comment.user.nick_name }}</div>
                                <div class="comment_text">
                                    {{ comment.content }}
                                </div>
                                {#渲染评论的时候,如果有二级评论也进行渲染#}
                                {% if comment.child %}
                                    {% for child_comment in comment.child %}
                                        <div class="reply_text_con">
                                            <div class="user_name2">{{ child_comment.user.nick_name }}</div>
                                            <div class="reply_text">
                                                {{ child_comment.content }}
                                            </div>
                                        </div>
                                    {% endfor %}
                                {% endif %}
                                <div class="comment-details">
                                    <div class="comment_time ">{{ comment.create_time }}</div>
                                    <div>
                                        <a href="javascript:;" class="comment_reply">回复</a>
                                        {#当前的评论是否有人点赞#}
                                        {# 当前用户点赞过此评论需要高亮 当前的评论就会出现在当前用户的点赞列表里面 #}
                                        <a href="javascript:;" class="comment_up
                                                {% if current_user.is_active and comment in current_user.comment_like_list.all() %}has_comment_up{% endif %}
                                            ">
                                            {#显示点赞数量#}
                                            {{ comment.user_like_list.count() or '赞' }}
                                        </a>
                                    </div>
                                </div>
                                <form class="reply_form" data-commit-id="{{ comment.id }}">
                                    <div>
                                        <textarea class="reply_input"></textarea>
                                        <div class="sub_submit">
                                            <input type="submit" name="" value="回复" class="reply_sub">
                                            <input type="reset" name="" value="取消" class="reply_cancel">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}

                <hr>
                <div class="comment">
                    <div class="person_pic ">
                        <img src="/static/images/worm.jpg" alt="用户图标">
                    </div>
                    <div class="comment-content">
                        <div class="user_name ">用户张山</div>
                        <div class="comment_text ">
                            写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！
                        </div>
                        {#渲染评论的时候,如果有二级评论也进行渲染#}
                        <div class="reply_text_con">
                            <div class="user_name2">用户李思</div>
                            <div class="reply_text">
                                个人认为，这篇文章同样代表了开源的另一个现实——令人悲哀。推广请好好推，别把应聘和推广以及开源相提并论，这样只会拉低你们开源的价值。
                            </div>
                        </div>
                        <div class="comment-details">
                            <div class="comment_time ">2020-01-01 00:00:00</div>
                            <div>
                                <a href="javascript:;" class="comment_reply">回复</a>
                                <a href="javascript:;" class="comment_up has_comment_up">1</a>
                            </div>
                        </div>
                        <form class="reply_form">
                            <div>
                                <textarea class="reply_input"></textarea>
                                <div class="sub_submit">
                                    <input type="submit" name="" value="回复" class="reply_sub">
                                    <input type="reset" name="" value="取消" class="reply_cancel">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}


{% block author %}
    {% if author %}
        <div class="author_card" style="width: 96%;margin-bottom: 5px;padding: 5px" data-userid="{{ author.id }}">
            <div class="card-header">
                <a href="/profile/{{ author.id }}" target="_blank" class="author_pic">
                    <img src="https://qingdeng123-1257113111.cos.ap-nanjing.myqcloud.com/user_pic/2022-02/73b879c8-35e2-423a-ab13-92609797103e.jpg"
                         alt="author_pic">
                </a>
                <a href="/profile/{{ author.id }}" target="_blank" class="author_name">{{ author.nick_name }}</a>
            </div>
            <div class="author_resume">{{ author.signature  or '这人什么都没留下' }}</div>
            <div class="author-card-info">
                <div class="writings"><span>总篇数</span><b>{{ author.article_list.count() }}</b></div>
                <div class="follows"><span>粉丝</span><b>{{ author.followers.count() }}</b></div>

                <a href="javascript:;" class="focused" data-userid="1" style="display:{% if is_followed %} inline-block {% else %} none {% endif %}">
                    <span class="over">取消关注</span>
                </a>
                <a href="javascript:;" class="focus" data-userid="1" style="display:{% if is_followed %} none{% else %} inline-block {% endif %}">
                    关注
                </a>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block foot_block %}
    {% include 'bbs/includes/foot_script.html' %}
    {#    <script src="/static/js/bbs/article.js"></script>#}
    <script>
      var article_id = {{ article.id }};
    </script>
    {#收藏的js逻辑#}
    <script src="/static/js/bbs/article_collect.js"></script>
    {#评论的js逻辑#}
    <script src="/static/js/bbs/article_comment.js"></script>
    {#评论点赞的逻辑#}
    <script src="/static/js/bbs/comment_like.js"></script>
    {#关注的逻辑#}
    <script src="/static/js/bbs/followed.js"></script>
{% endblock %}
